<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input v-model="params.userName" style="width: 200px ; height: 40px" placeholder="请输入姓名"></el-input>
      <el-input v-model="params.phone" style="width: 200px ; height: 40px ; margin-left :5px" placeholder="请输入电话"></el-input>
      <el-input v-model="params.timeSelection" style="width: 200px ; height: 40px ; margin-left :5px" placeholder="请输入预约时间"></el-input>
      <el-button type="primary" style="margin-left: 8px" @click="getReserve()"  round>搜索</el-button>
      <el-button type="primary" @click="clean()" round>清空</el-button>
    </div>
    <div>
      <el-row>
        <el-col :span="11" :column="2"  v-for="(reserve,index) in reserveForm" :key="index" style="margin-left: 20px;margin-top: 40px">
          <el-card shadow="hover">
            <el-descriptions title="我的预约" border>
              <el-descriptions-item label="客户姓名">{{reserve.userName}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{reserve.phone}}</el-descriptions-item>
              <el-descriptions-item label="预约时间">{{reserve.timeSelection}}</el-descriptions-item>
              <el-descriptions-item label="总花费">{{reserve.totalPrice}}</el-descriptions-item>
              <el-descriptions-item label="提交时间">{{reserve.reserveTime}}</el-descriptions-item>
            </el-descriptions>
            <el-steps :space="200" :active="reserve.reserveProgress" finish-status="success" style="margin-top: 10px">
              <el-step title="提交预约"></el-step>
              <el-step title="支付挂号费"></el-step>
              <el-step title="就诊"></el-step>
              <el-step title="缴费"></el-step>
            </el-steps>

            <el-button type="primary" style="float: right;margin-top: 2px;margin-bottom: 5px" @click="accept(reserve.totalPrice,reserve.id)">确认</el-button>
            <div style="float: right;margin-top: 2px;margin-bottom: 5px">
              消费金额:
              <el-input v-model="reserve.totalPrice" style="width: 80px"></el-input>
            </div>



          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="block" style="margin-top: 50px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[4]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>


</template>


<script>
import request from "@/utils/request";

export default {
  name: "EmpReserveView",
  data() {
    return {
      /*把前台local storage缓存的用户的字符串信息转化为json数据*/
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      reserveForm: [],
      params:{
        userName: '',
        phone: '',
        //分页需要传到后端的数据
        pageNum: 1,
        pageSize: 4,
        doctorName: '',

      },
      priceParams: {},
      total: 0,
    }
  },
  created() {
    this.getReserve();
  },
  methods: {
    clean() {
      this.params = {
        name:'',
        phone:'',
        timeSelection: '',
        pageNum: 1,
        pageSize: 4
      }
      this.getReserve();
    },
    accept(totalPrice,id) {
      this.priceParams.totalPrice=totalPrice
      this.priceParams.id = id;
      this.priceParams.reserveProgress = 3;
      request.post("/reserve/setPrice/", this.priceParams).then(res => {
        if (res.code === '0') {
          this.$message.success("操作成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getReserve() {
      this.params.doctorName = this.user.name;
      request.get("/reserve/getOwnReserve",{
        params: this.params
      } ).then(res => {
        if (res.code === '0') {
          this.reserveForm = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    handleSizeChange(pageSize) {
      //给params里面的pageSize赋值
      this.params.pageSize = pageSize
      //还要查一遍才能显示数据
      this.getReserve();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.getReserve();
    },
  }
}
</script>

<style scoped>

</style>